<template>
  <div class="page-container">
    <div class="page-header">
      <div class="page-tile">
        {{ $t('route.clientList') }}
      </div>
      <div class="left-wrapper"></div>
      <div class="right-wrapper"></div>
    </div>
    <el-scrollbar class="page-content">
      <div class="content-wrapper">
        <el-card>
          <basic-table
            :pageMethod="(params) => {
              params.search = searchValue;
              if (tableSearch) {
                params.page = 1;
                tableSearch = false;
              }
              params.is_connected = this.isConnected;
              return $pandaApi.apiGetClients(params);
            }"
          >
            <template #table-options="tableSlotData">
              <div class="table-left-options">
                <!-- <el-button class="icon-button setting-button" style="width: auto; margin-left: 10px;" :disabled="tableSlotData.table.selectRows.length <= 0">
                  <i class="iconfont iconzhongyiicon_tiqurizhi" style="font-size: 12px; margin-right: 5px;"></i>
                  <span style="font-size: 12px;">{{ $t('clientListManage.extractLog') }}</span>
                </el-button> -->
                <el-button class="icon-button setting-button" style="width: auto;" v-if="$store.state.auth.authrole === 'system_admin'" :disabled="tableSlotData.table.selectRows.length <= 0" @click="batchVersionUpdate(tableSlotData.table.selectRows)">
                  <i class="iconfont iconzhongyiicon_banbengengxin" style="font-size: 12px; margin-right: 5px;"></i>
                  <span style="font-size: 12px;">{{ $t('clientListManage.versionUpdate') }}</span>
                </el-button>
                <el-button class="icon-button setting-button" :loading="tableSlotData.table.loading" 
                  @click="$nextTick(()=>tableSlotData.table.refresh().then(()=>{
                    $message.success($t('common.refreshSuccess'))
                  }).catch(()=>{
                    $message.success($t('common.refreshFail'))
                  }))" style="width: auto;margin-right:10px;"
                >
                  <i v-if="!tableSlotData.table.loading" class="el-icon-refresh" style="font-size: 12px; margin-right: 2px;"></i>
                  <span style="font-size: 12px;">{{ $t("common.refresh") }}</span>
                </el-button>
                <el-dropdown @command="handleBatchCommand">
                  <el-button class="icon-button setting-button" style="width: auto;font-size: 12px;" :disabled="tableSlotData.table.selectRows.length <= 0">
                    {{ $t('common.More') }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <!-- <el-dropdown-item v-if="$store.state.auth.authrole != 'system_admin'" :command="{action: 'lock', id: tableSlotData.table.selectRows}">{{ $t('clientListManage.lock') }}</el-dropdown-item> -->
                    <!-- <el-dropdown-item v-if="$store.state.auth.authrole != 'system_admin'" :command="{action: 'unlock', id: tableSlotData.table.selectRows}">{{ $t('clientListManage.unLock') }}</el-dropdown-item> -->
                    <el-dropdown-item :command="{action: 'allow', id: tableSlotData.table.selectRows}">{{ $t('clientListManage.allowAccess') }}</el-dropdown-item>
                    <el-dropdown-item :command="{action: 'no', id: tableSlotData.table.selectRows}">{{ $t('clientListManage.noAccess') }}</el-dropdown-item>
                    <el-dropdown-item :command="{action: 'start', id: tableSlotData.table.selectRows}">{{ $t('clientListManage.startInventory') }}</el-dropdown-item>
                    <el-dropdown-item :command="{action: 'cancel', id: tableSlotData.table.selectRows}">{{ $t('clientListManage.cancelInventory') }}</el-dropdown-item>
                    <!-- <el-dropdown-item :command="{action: 'disconnect', id: tableSlotData.table.selectRows}">{{ $t('objectActive.disconnect') }}</el-dropdown-item> -->
                    <el-dropdown-item :command="{action: 'remove', id: tableSlotData.table.selectRows}">{{ $t('clientListManage.removeClient') }}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <div class="table-right-options">
                <el-select default-first-option v-model="isConnected" @change="tableSlotData.table.refresh(true)" :disabled="tableSlotData.table.loading" style="margin-right: 10px;">
                  <el-option
                    v-for="status in connectedStatus"
                    :key="status.value"
                    :label="status.label"
                    :value="status.value">
                  </el-option>
                </el-select>
                <el-input :placeholder="$t('clientListManage.searchClient')" @keyup.enter.native="tableSearchChange(tableSlotData)" style="width:200px" v-model="searchValue">
                </el-input>
                <el-button @click="tableSearchChange(tableSlotData)" type="primary" style="margin-left: 10px;" >{{ $t('common.search') }}</el-button>
              </div>
            </template>
            <template #table-column="tableSlotData">
              <el-table-column type="selection" width="40" align="center"></el-table-column>
              <el-table-column
                prop="name"
                :label="$t('common.name')"
                width="200">
                <template #default="props">
                  <div style="width:100%;display:flex;justify-content:left;align-items: center">
                    <link-button style="max-width:80%" :isName="true" :content="props.row.name" :size="1" :font-size="'12px'" @click="initClientDetail(props.row)" />
                    <el-tooltip class="item" effect="dark" :content="$t('clientListManage.noAccess')" placement="top-start">
                      <i class="icon iconfont iconcuowu" style="color:red;font-size:14px;margin-left:4px" v-show="!props.row.enabled"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" :content="$t('clientListManage.notChecked')" placement="top-start">
                      <i class="el-icon-s-release" style="font-size:16px;margin-left:4px;height:19px" v-show="props.row.need_check"></i>
                    </el-tooltip>
                  </div>
                  
                </template>
              </el-table-column>
              <el-table-column
                prop="is_connected"
                :label="$t('clientListManage.connectionStatus')">
                <template #default="props">
                  <el-tag type="success" v-if="props.row.is_connected">{{ $t('clientListManage.connected') }}</el-tag>
                  <el-tag type="danger" v-else>{{ $t('clientListManage.disconnect') }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="client_version"
                :label="$t('clientVersionManage.versionNumber')">
                <template #default="props">
                  <i class="iconfont iconwindows" v-if="props.row.product_model === 'x86_windows'" style="font-size: 12px; margin-right: 5px;"></i>
                  <i class="iconfont iconicon_linux" v-else style="font-size: 12px; margin-right: 5px;"></i>
                  <span type="success">{{ props.row.client_version }}</span>
                  <el-tooltip effect="dark" :content="$t('clientVersionManage.targetVersionTips')" placement="right">
                    <i class="iconfont iconbanben" v-if="props.row.target_version_number" style="font-size: 12px; margin-left: 5px; color: #FF931D"></i>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column
                v-if="$store.state.auth.authrole === 'system_admin'"
                prop="cloud_tenant_name"
                :label="$t('common.tenant')">
              </el-table-column>
              <el-table-column
                prop="last_login_user_name"
                :label="$t('route.user')">
              </el-table-column>
              <el-table-column
                prop="last_connect_desktop_name"
                :label="$t('clientListManage.lastConnectDesktopName')">
              </el-table-column>
              <el-table-column
                prop="action"
                width="200"
                :label="$t('common.action')">
                <template #default="props">
                  <link-button :content="$t('common.remove')" :size="10" :font-size="'12px'" style="margin-right:15px" @click="removeClient(props.row)"></link-button>
                  <link-button :content="$t('objectActive.rename')" :size="10" :font-size="'12px'" style="margin-right:15px" @click="initClientRename(props.row)"></link-button>
                  <el-dropdown @command="handleCommand">
                    <el-button type="text" class="el-dropdown-link">
                      {{ $t('common.More') }}<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <!-- <el-dropdown-item :disabled="isRemote || !props.row.meshagent_id" :command="{action: 'remote', id: props.row}">{{ $t('clientListManage.remoteControl') }}</el-dropdown-item> -->
                      <!-- <el-dropdown-item :command="{action: 'log', id: props.row.name}">{{ $t('clientListManage.extractLog') }}</el-dropdown-item> -->
                      <el-dropdown-item v-if="$store.state.auth.authrole === 'system_admin'" :command="{action: 'update', id: props.row}">{{ $t('clientListManage.versionUpdate') }}</el-dropdown-item>
                      <!-- <el-dropdown-item v-if="$store.state.auth.authrole != 'system_admin'" :command="{action: 'lock', id: props.row}">{{ $t('clientListManage.lock') }}</el-dropdown-item> -->
                      <!-- <el-dropdown-item v-if="$store.state.auth.authrole != 'system_admin'" :command="{action: 'unlock', id: props.row}">{{ $t('clientListManage.unLock') }}</el-dropdown-item> -->
                      <el-dropdown-item :disabled="props.row.enabled" :command="{action: 'allow', id: props.row}">{{ $t('clientListManage.allowAccess') }}</el-dropdown-item>
                      <el-dropdown-item :disabled="!props.row.enabled" :command="{action: 'no', id: props.row}">{{ $t('clientListManage.noAccess') }}</el-dropdown-item>
                      <el-dropdown-item :disabled="props.row.need_check" :command="{action: 'start', id: props.row}">{{ $t('clientListManage.startInventory') }}</el-dropdown-item>
                      <el-dropdown-item :disabled="!props.row.need_check" :command="{action: 'cancel', id: props.row}">{{ $t('clientListManage.cancelInventory') }}</el-dropdown-item>
                      <!-- <el-dropdown-item :disabled="!props.row.is_connected" :command="{action: 'disconnect', id: props.row}">{{ $t('objectActive.disconnect') }}</el-dropdown-item> -->
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
            </template>
            <template #others-elements="tableSlotData">
              <!-- 终端详情 -->
              <form-dialog
                :visible="clientDetailDialogProps.visible"
                :title="clientDetailDialogProps.title"
                @handleClose="close"
                :width="'600px'"
              >
                <template v-slot:content>
                  <client-detail :clientDetailData="clientDetailData"></client-detail>
                </template>
                <template v-slot:footer>
                  <el-button type="primary" @click="close">{{ $t('common.confirm') }}</el-button>
                </template>
              </form-dialog>
              <!-- 终端重命名 -->
              <client-rename ref="clientRename" :submit-method="(data) => {
                return $pandaApi.apiPatchClient(data.id, data).then(() => {
                  $message.success($t('clientListManage.renameSuccess'))
                  tableSlotData.table.refresh();
                }).catch(()=>{
                  $message.success($t('clientListManage.renameFail'))
                  tableSlotData.table.refresh();
                });
              }"></client-rename>
              <!-- 版本更新 -->
              <version-update ref="versionUpdateDialog" :update-method="(id, data) => $pandaApi.apiPatchClient(id, data).then(() => {
                  $message.success($t('clientListManage.versionUpdateSuccess'))
                  tableSlotData.table.refresh();
                }).catch(() => {
                  $message.error($t('clientListManage.versionUpdateFail'))
                  tableSlotData.table.refresh();
                })"></version-update>
              <!-- 批量版本更新 -->
              <version-update ref="batchVersionUpdateDialog" :update-method="(ids, data) => $pandaApi.apiBatchPatchClient(ids, data).then(() => {
                    $message.success($t('common.batch') + $t('clientListManage.versionUpdateSuccess'))
                    tableSlotData.table.refresh();
                  }).catch(() => {
                    $message.error($t('common.batch') + $t('clientListManage.versionUpdateFail'))
                    tableSlotData.table.refresh();  
                })"></version-update>
              <!-- 删除终端 -->
              <client-delete ref="PasswordDeleteDialog" :delete-method="(data) => $pandaApi.apiDeleteClient(data).then(() => {
                  $message.success($t('clientListManage.removeClientSuccess'))
                  tableSlotData.table.deleteRefresh();
                }).catch(()=>{
                  $message.error($t('clientListManage.removeClientFail'))
                  tableSlotData.table.deleteRefresh();
                })">
              </client-delete>
              <!-- 批量删除终端 -->
              <client-delete ref="batchPasswordDeleteDialog" :delete-method="(dataList) => $pandaApi.apiBatchDeleteClient(dataList).then(() => {
                  $message.success($t('clientListManage.batchRemoveClientSuccess'))
                  tableSlotData.table.deleteRefresh(dataList.length);
                }).catch(()=>{
                  $message.error($t('clientListManage.batchremoveClientFail'))
                  tableSlotData.table.deleteRefresh(dataList.length);
                })">
              </client-delete>
              <!-- 锁定设置 -->
              <client-lock ref="lockDialog" :lock-method="(id, data) => $pandaApi.apiPatchClient(id, data).then(() => {
                    $message.success($t('clientListManage.lockSuccess'));
                    tableSlotData.table.refresh();
                  }).catch(() => {
                    $message.error($t('clientListManage.lockFail'))
                    tableSlotData.table.refresh();
                })">
              </client-lock>
              <!-- 终端接入 -->
              <client-access ref="accessDialog" :access-method="(id, data) => $pandaApi.apiPatchClient(id, data).then(() => {
                  if(accessStatus){
                    $message.success($t('clientListManage.allowAccessSuccess'));
                  }else{
                    $message.success($t('clientListManage.noAccessSuccess'));
                  }
                  tableSlotData.table.refresh();
                }).catch(()=>{
                  if(accessStatus){
                    $message.error($t('clientListManage.allowAccessFail'));
                  }else{
                    $message.error($t('clientListManage.noAccessFail'));
                  }
                  tableSlotData.table.refresh();
                })">
              </client-access>
              <!-- 批量终端接入 -->
              <client-access ref="batchAccessDialog" :access-method="(ids, data) => $pandaApi.apiBatchPatchClient(ids, data).then(() => {
                if(accessStatus){
                    $message.success($t('clientListManage.batchAllowSuccess'));
                  }else{
                    $message.success($t('clientListManage.batchNoSuccess'));
                  }
                  tableSlotData.table.refresh();
                }).catch(()=>{
                  if(accessStatus){
                    $message.error($t('clientListManage.batchAllowFail'));
                  }else{
                    $message.error($t('clientListManage.batchNoFail'));
                  }
                  tableSlotData.table.refresh();})">
              </client-access>
              <!-- 终端盘点 -->
              <client-inventory ref="inventoryDialog" :inventory-method="(id, data) => $pandaApi.apiPatchClient(id, data).then(() => {
                if(inventoryStatus){
                    $message.success($t('clientListManage.startInventorySuccess'));
                  }else{
                    $message.success($t('clientListManage.cancelInventorySuccess'));
                  }
                  tableSlotData.table.refresh();
                }).catch(()=>{
                  if(inventoryStatus){
                    $message.error($t('clientListManage.startInventoryFail'));
                  }else{
                    $message.error($t('clientListManage.startInventoryFail'));
                  }
                  tableSlotData.table.refresh();})">
              </client-inventory>
              <!-- 批量终端盘点 -->
              <client-inventory ref="batchInventoryDialog" :inventory-method="(ids, data) => $pandaApi.apiBatchPatchClient(ids, data).then(() => {
                if(inventoryStatus){
                    $message.success($t('clientListManage.batchStartInventorySuccess'));
                  }else{
                    $message.success($t('clientListManage.batchCancelInventorySuccess'));
                  }
                  tableSlotData.table.refresh();
                }).catch(()=>{
                  if(inventoryStatus){
                    $message.error($t('clientListManage.batchStartInventoryFail'));
                  }else{
                    $message.error($t('clientListManage.batchStartInventoryFail'));
                  }
                  tableSlotData.table.refresh();})">
              </client-inventory>
              <!-- 断开连接 -->
              <client-disconnect ref="disconnectDialog" :disconnect-method="(data) => $pandaApi.apiBatchActionClient(data).then(() => {
                tableSlotData.table.refresh();})">
              </client-disconnect>
              <!-- 批量断开连接 -->
              <client-disconnect ref="batchDisconnectDialog" :disconnect-method="(data) => $pandaApi.apiBatchActionClient(data).then(() => {
                tableSlotData.table.refresh();})">
              </client-disconnect>
            </template>
          </basic-table>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import BasicTable from '../../../components/Basic/Table/BasicTable.vue';
import LinkButton from '../../../components/Basic/Button/LinkButton.vue';
import FormDialog from '../../../components/Dialog/formDialog.vue';
import ClientDetail from './client_detail.vue';
import ClientRename from './client_rename.vue';
import VersionUpdate from './version_update.vue';
import ClientDelete from './client_delete.vue';
import ClientAccess from './client_access.vue';
import ClientInventory from './client_inventory.vue';
import ClientDisconnect from './client_disconnect.vue';
import ClientLock from './client_lock.vue';
import generateMeshLoginToken from '../../../utils/meshagentToken';
export default Vue.extend({
  components: {
    BasicTable,
    LinkButton,
    FormDialog,
    ClientDetail,
    ClientRename,
    VersionUpdate,
    ClientDelete,
    ClientAccess,
    ClientInventory,
    ClientDisconnect,
    ClientLock
  },
  data() {
    return {
      tableData:[],
      // 终端详情
      clientDetailDialogProps: {
        visible: false,
        title: '111'
      },
      clientDetailData: {},
      searchValue: '',
      meshData: '',
      isRemote: true,
      accessStatus: false,
      inventoryStatus: false,
      tableSearch: false,
      isConnected: '',
      connectedStatus: [{
        value: '',
        label: this.$t('clientListManage.allConnect')
      },{
        value: 'true',
        label: this.$t('clientListManage.connected')
      },{
        value: 'false',
        label: this.$t('clientListManage.disconnect')
      }]
    }
  },
  mounted() {
    (this as any).$pandaApi.apiGetMeshSettings().then((res: any) => {
      (this as any).meshData = res;
      this.meshUri = res.mesh_uri;
      this.meshLoginUserID = res.mesh_login_user_id;
      this.meshLoginTokenKey = res.mesh_login_token_key;
      this.meshID = res.mesh_default_device_group_id_hex;
      this.meshServerID = res.mesh_server_id_hex;
      this.meshLoginToken = generateMeshLoginToken(this.meshLoginUserID, this.meshLoginTokenKey);
      // for debug
      this.isRemote = false
    });
  },
  methods: {
    // 表操作-更多
    handleBatchCommand(k: any) {
      switch(k.action) {
        case 'lock' : this.batchLock(k.id);break;
        case 'unlock' : this.batchUnLock(k.id);break;
        case 'allow' : this.batchAllowAccess(k.id); break;
        case 'no' : this.batchNoAccess(k.id); break;
        case 'start' : this.batchStartInventory(k.id); break;
        case 'cancel' : this.batchCancelInventory(k.id); break;
        case 'disconnect' : this.batchDisconnect(k.id); break;
        case 'remove' : this.batchRemove(k.id); break;
        default : break;
      }
    },

    // 表操作-更多-允许接入
    batchAllowAccess(k: any) {
      this.accessStatus = true
      let ids = new Array();
      k.map((i: any)=>{
        ids.push(i.id);
      });
      (this as any).$refs.batchAccessDialog.init({
        title: (this as any).$t('common.batch') + (this as any).$t('clientListManage.allowAccess'),
        tip: (this as any).$t('clientListManage.batchAction', {action: (this as any).$t('clientListManage.allowAccess')} ),
        clientList: ids,
        params: {
          enabled: true
        }
      });
    },

    // 表操作-更多-禁止接入
    batchNoAccess(k: any) {
      this.accessStatus = false
      let ids = new Array();
      k.map((i: any)=>{
        ids.push(i.id);
      });
      (this as any).$refs.batchAccessDialog.init({
        title: (this as any).$t('common.batch') + (this as any).$t('clientListManage.noAccess'),
        tip: (this as any).$t('clientListManage.batchAction', {action: (this as any).$t('clientListManage.noAccess')} ),
        clientList: ids,
        params: {
          enabled: false
        }
      });
    },

    // 表操作-更多-开始盘点
    batchStartInventory(k: any) {
      let ids = new Array();
      this.inventoryStatus = true;
      k.map((i: any)=>{
        ids.push(i.id);
      });
      (this as any).$refs.batchInventoryDialog.init({
        title: (this as any).$t('common.batch') + (this as any).$t('clientListManage.startInventory'),
        tip: (this as any).$t('clientListManage.batchAction', {action: (this as any).$t('clientListManage.startInventory')} ),
        clientList: ids,
        need_check: true
      });
    },

    // 表操作-更多-取消盘点
    batchCancelInventory(k: any) {
      let ids = new Array();
      this.inventoryStatus = false;
      k.map((i: any)=>{
        ids.push(i.id);
      });
      (this as any).$refs.batchInventoryDialog.init({
        title: (this as any).$t('common.batch') + (this as any).$t('clientListManage.cancelInventory'),
        tip: (this as any).$t('clientListManage.batchAction', {action: (this as any).$t('clientListManage.cancelInventory')} ),
        clientList: ids,
        need_check: false
      });
    },

    // 表操作-更多-断开连接
    batchDisconnect(k: any) {
      let ids = new Array();
      k.map((i: any)=>{
        ids.push(i.id);
      });
      (this as any).$refs.batchDisconnectDialog.init({
        title: (this as any).$t('common.batch') + (this as any).$t('objectActive.disconnect'),
        tip: (this as any).$t('clientListManage.batchAction', {action: (this as any).$t('objectActive.disconnect')} ),
        clientList: ids
      });
    },

    // 表操作-更多-移除终端
    batchRemove(selectRows: Array<any>) {
      (this as any).$refs.batchPasswordDeleteDialog.init({
        title: (this as any).$t('common.batch') + (this as any).$t('clientListManage.removeClient'),
        tip: (this as any).$t('clientListManage.batchAction', {action: (this as any).$t('common.delete')} ),
        clientList: selectRows
      });
    },

    // 表操作-版本更新
    batchVersionUpdate(k: any) {
      let type = '';
      for(let t=0; t<k.length-1; t++) {
        if (k[t].product_model != k[t+1].product_model) {
          this.$message.error((this as any).$t('clientListManage.clientNoSame'))
          return false;
        }
      }
      type = k[0].product_model
      let ids = new Array();
      k.map((i: any)=>{
        ids.push(i.id);
      });
      (this as any).$refs['batchVersionUpdateDialog'].init({
        title: (this as any).$t('common.batch') + (this as any).$t('clientListManage.versionUpdate'),
        versionList: ids,
        type: type,
        row: k
      });
    },

    // 行操作-更多
    handleCommand(k: any) {
      switch(k.action) {
        case 'remote' : this.remoteClient(k);break;
        case 'log' : break;
        case 'update' : this.clientVersionUpdate(k.id); break;
        case 'lock' : this.lock(k.id); break;
        case 'unlock' : this.unlock(k.id); break;
        case 'allow' : this.allowAccess(k.id); break;
        case 'no' : this.noAccess(k.id); break;
        case 'start' : this.startInventory(k.id); break;
        case 'cancel' : this.cancelInventory(k.id); break;
        case 'disconnect' : this.disconnect(k.id); break;
        default : break;
      }
    },

    //行操作-更多-远程运维-remote
    remoteClient(k: any) {
      // console.log(this.meshUri, this.meshLoginUserID, this.meshID, this.meshLoginTokenKey, this.meshLoginToken);
      this.$router.push({
        path:'remoteClient',
        query: {
          mesh: JSON.stringify({
            url: this.meshUri,
            meshLoginToken: this.meshLoginToken,
            id: k
          })
        }
      })
    },
    //行操作-更多-版本更新-update
    clientVersionUpdate(k: any){
      (this as any).$refs['versionUpdateDialog'].init({
        title: (this as any).$t('clientListManage.versionUpdate'),
        versionList: k.id,
        type: k.product_model,
        row: k
      });
    },

    //行操作-更多-锁定设置-lock
    lock(k: any){
      (this as any).$refs.lockDialog.init({
        title: (this as any).$t('clientListManage.lock'),
        clientList: k.id,
        params: true
      });
    },

    //行操作-更多-解锁设置-unlock
    unlock(k: any){
      (this as any).$refs.lockDialog.init({
        title: (this as any).$t('clientListManage.unLock'),
        clientList: k.id,
        params: false
      });
    },

    // 行操作-更多-允许接入-allow
    allowAccess(k: any) {
      this.accessStatus = true;
      (this as any).$refs.accessDialog.init({
        title: (this as any).$t('clientListManage.allowAccess'),
        tip: (this as any).$t('clientListManage.rowAction', { action: (this as any).$t('clientListManage.allowAccess'), name: k.name} ),
        clientList: k.id,
        params: {
          enabled: true
        }
      });
    },

    // 行操作-更多-禁止接入-no
    noAccess(k: any) {
      (this as any).accessStatus = false;
      (this as any).$refs.accessDialog.init({
        title: (this as any).$t('clientListManage.noAccess'),
        tip: (this as any).$t('clientListManage.rowAction', { action: (this as any).$t('clientListManage.noAccess'), name: k.name} ),
        clientList: k.id,
        params: {
          enabled: false
        }
      });
    },

    // 行操作-更多-开始盘点-start
    startInventory(k: any) {
      this.inventoryStatus = true;
      (this as any).$refs.inventoryDialog.init({
        title: (this as any).$t('clientListManage.startInventory'),
        tip: (this as any).$t('clientListManage.rowAction', { action: (this as any).$t('clientListManage.startInventory'), name: k.name} ),
        clientList: k.id,
        need_check: true
      });
    },

    // 行操作-更多-取消盘点-cancel
    cancelInventory(k: any) {
      this.inventoryStatus = false;
      (this as any).$refs.inventoryDialog.init({
        title: (this as any).$t('clientListManage.cancelInventory'),
        tip: (this as any).$t('clientListManage.rowAction', { action: (this as any).$t('clientListManage.cancelInventory'), name: k.name} ),
        clientList: k.id,
        need_check: false
      });
    },

    // 行操作-更多-断开连接-disconnect
    disconnect(k: any) {
      (this as any).$refs.disconnectDialog.init({
        title: (this as any).$t('objectActive.disconnect'),
        tip: (this as any).$t('clientListManage.rowAction', { action: (this as any).$t('objectActive.disconnect'), name: k.name} ),
        clientList: [k.id]
      });
    },

    // 行-删除
    removeClient(row: any) {
      (this as any).$refs['PasswordDeleteDialog'].init({
        title: (this as any).$t('clientListManage.deleteClient'),
        tip: (this as any).$t('clientListManage.rowAction', { action: (this as any).$t('common.delete'), name: row.name} ),
        clientList: row.id
      });
    },

    // 终端详情
    initClientDetail(row: any) {
      this.clientDetailData = row
      this.clientDetailDialogProps.title = row.name
      this.clientDetailDialogProps.visible = true
    },

    // 详情关闭
    close() {
      this.clientDetailDialogProps.visible = false
    },

    // 终端重命名
    initClientRename(row: any) {
      (this as any).$refs['clientRename'].init(row)
    },
    // 页面刷新重置page
    tableSearchChange(table: any) {
      (this as any).tableSearch = true;
      table.table.refresh(true);
    }
  }
})
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #EFF1F4;

  .page-header {
    height: 60px;
    background-color: #FFFFFF;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #D9D9D9;

    .page-tile {
      color: #031129;
      font-size: 16px;
      margin-left: 20px;

      .iconzhongyiicon_gaojing {
        margin-left: 5px;
      }
    }
  }

  .page-content {
    height: calc(100vh - 110px);
    overflow: hidden;
    flex-grow: 1;

    .content-wrapper {
      padding: 15px;
    }
  }
}

.table-left-options {
  display: flex;
}

.table-right-options {
  display: flex;

  .setting-button {
    margin-right: 10px;
  }
}
</style>
